<!--
 * @Date: 2021-11-10 11:23:23
 * @LastEditors: 邓春宜
 * @Desc: 
 * @LastEditTime: 2021-11-24 09:39:09
 * @FilePath: \tianjushi-kanban\src\components\text\TextStyle3.vue
-->
<template>
  <div
    class="box"
    :style="[
      {
        width: width + 'px',
        height: height + 'px',
        paddingTop: height * 0.1 + 'px',
        paddingLeft: width * 0.05 + 'px',
      },
    ]"
  >
    <div
      class="inline-block"
      :style="{ 'font-size': height * 0.7 + 'px', 'margin-right': '10px' ,color:color,'text-shadow': '5px 5px 20px rgba(3, 255, 129, 0.5)'}"
    >
      <slot name="icon"></slot>
    </div>
    <div class="inline-block">
      <p
        :style="{
          color: '#fff',
          fontSize: height * 0.2 + 'px',
        }"
      >
        {{ title }}
      </p>
      <p>
        <span
          class="font2"
          :style="{
            color:color,
            fontSize: height * 0.5 + 'px',
          }"
        >
          {{ value }}</span
        ><span
          class="font3"
          :style="{
            color: '#fff',
            fontSize: height * 0.2 + 'px',
          }"
          >{{ unit }}</span
        >
      </p>
    </div>
    <div class="inline-block" v-if="status>0">
          <Rise  :style="{ 'font-size': height * 0.5 + 'px',color:'#00e473'}"/>
    </div>
    <div class="inline-block" v-else-if="status<0">
         <Fall :style="{ 'font-size': height * 0.5 + 'px' ,color:'#eb372b'}"/> 
    </div>
    <div class="inline-block" v-else>  
    </div>
  </div>
</template>

<script>
import { onMounted, toRefs, ref, reactive, watch, computed } from "vue"; 
import Rise from "@/component/board/icons/Rise.vue";
import Fall from "@/component/board/icons/Fall.vue";
export default {
  components:{
    Rise,
    Fall 
  },
  props: {
    status: {
      type: Number,
      default: 0,
    },
    width: {
      type: Number,
      default: 400,
    },
    height: {
      type: Number,
      default: 160,
    },
    title: {
      type: String,
      default: "标题",
    },
    value: {
      type: String,
      default: "1234567.89",
    },
    unit: {
      type: String,
      default: "kg",
    },
    color: {
      type: String,
      default: "#58C8FF",
    },
    
  },
  computed: {
  
  },
  setup(props) {
    const state = {
      name: 111,
    };
    return {
      ...toRefs(state),
    };
  },
};
</script>

<style lang="css" scoped>
.box {
  background: url("~images/border4.png") no-repeat center;
  background-size: 100% 100%;
  box-sizing: border-box;
}

.box p {
  line-height: 1.2;
  text-align: left;
}

.inline-block {
  display: inline-block;
  vertical-align: middle;
  line-height: 1;
}
.font2 {
  width: auto;
  font-family: Digital-7;
  text-align: center;
  list-style: none;
  text-orientation: upright;
  text-shadow: 5px 5px 20px rgba(3, 255, 129, 0.5);
}
.font3 {
  padding-left: 10px;
}
</style> 